<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="username" />&nbsp;
      <button @click="searchUsers">search</button>
    </div>
  </section>
</template>

<script>
import axios from 'axios';

export default {
  name: "SearchComponent",
  data(){
    return {
        username:'',
    }
  },
  methods:{
    searchUsers(){
        if(''===this.username){
            return;
        }
        this.$bus.$emit('startSearch');
        axios.get(`https://api.github.com/search/users?q=${this.username}`)
        .then(
            response=>{
                this.$bus.$emit('refreshList', response.data.items)
            },
            error=>{
                console.log(error.message);
                this.$bus.$emit('errorList', error.message);
            }
        );
    },
  }
};
</script>

<style scoped>
</style>